<template>
	<view id="container">
		<logo position="center"></logo>
		<!-- <view id="rule">
			<view id="rule-header">规则说明</view>
			<view class="rule-label">用户匹配5名队友，每次答题时，以最先答题的队员的答案作为所在队伍的答案</view>
			<view class="rule-label">得分高的队伍胜出</view>
		</view> -->
		<view id="button-list">
			<view class="nav" @click="start">
				<image src="@/static/img/ico-competition-active.png" mode="widthFix" style="width:100%;"></image>
			</view>
			<!-- <view class="nav" @click="jumpHistory">
				<image src="@/static/img/ico-search-active.png" mode="widthFix" style="width:100%;"></image>
			</view> -->
			<view class="nav" @click="exit()">
				<image src="@/static/img/exit-active.png" mode="widthFix" style="width:100%;"></image>
			</view>
		</view>
		<view id="user-info">
			当前登录：{{user.nickName}}
		</view>
	</view>
	<uni-popup ref="inputRoom" type="dialog">
		<uni-popup-dialog ref="inputClose" mode="input" title="输入房间号" value="" placeholder="请输入房间号"
			@confirm="zoomConfirm"></uni-popup-dialog>
	</uni-popup>
	<!-- <view class="container">
		<uni-swiper-dot class="uni-swiper-dot-box" :info="swiperList" mode="default" field="content">
			<swiper class="swiper-box">
				<swiper-item v-for="(item, index) in swiperList" :key="index">
					<view class="swiper-item">
						<image style="width: 100%;" mode="scaleToFill" :src="item"></image>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view style="margin-top:50px;">
			<uni-grid :column="4" :showBorder="false" :highlight="true">
				<uni-grid-item>
					<view class="icon" @click="start()">
						<uni-icons type="plusempty" size="100"></uni-icons>
						<text class="banner-text">开始比赛</text>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="icon">
						<uni-icons type="eye-filled" size="100"></uni-icons>
						<text class="banner-text">历史成绩</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>

		<uni-popup ref="inputRoom" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="输入房间号" value="" placeholder="请输入房间号"
				@confirm="zoomConfirm"></uni-popup-dialog>
		</uni-popup>
	</view> -->
</template>

<script>
	import logo from "@/component/common/logo.vue";
	export default {
		components: {
			logo
		},
		data() {
			return {
				user:this.$user.getUser()
				// swiperList: [
				// 	"/static/banner1.jpg", "/static/banner2.jpg"
				// ]
			}
		},
		onLoad() {
			this.$user.isLogin();
		},
		methods: {
			start() {
				this.$refs.inputRoom.open()
			},
			zoomConfirm(zoomCode) {
				this.$request({
					url: "api/zoom/" + zoomCode
				}).then(res => {
					uni.navigateTo({
						url: '/pages/start/start?zoomId=' + res.data.id + "&zoomCode=" + zoomCode
					});
				})
			},
			jumpHistory() {
				uni.navigateTo({
					url: '/pages/history/history?zoomId=' + res.data.id
				});
			},
			exit() {
				uni.clearStorageSync();
				uni.redirectTo({
					url: "/pages/login/login"
				});
			}
		}
	}
</script>

<style>
	#rule {
		width: 100%;
		text-align: center;
		color: #fff;
	}

	#rule #rule-header {
		font-size: 75rpx;
	}

	#rule .rule-label {
		font-size: 30rpx;
	}

	#button-list {
		display: flex;
		/* width: 1200rpx; */
		width: 800rpx;
		margin: 0 auto;
		justify-content: space-between;
		margin-top: 150rpx;
	}

	#button-list .nav {
		width: 350rpx;
	}
#user-info{text-align: center;color:#fff;font-weight: bold;margin-top: 50rpx;font-size:40rpx;}
	/* 
	uni-swiper {
		height: 220rpx;
	}

	.banner-text {
		display: block;
		text-align: center;
		margin-top: 50rpx;
	}

	.icon {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 300rpx;
	} */
	
</style>